<template>
  <view class="container">
    <view class="lv">
      <swiper
        class="swiper-box"
        :current="current"
        :autoplay="false"
        previous-margin="62rpx"
        next-margin="22rpx"
        :circular="true"
        @change="_bindChange"
      >
        <swiper-item v-for="(dataItem, index) in dataList" :key="index" class="swiper_item">
          <view class="swiper_item_content" :class="'swiper_item_' + dataItem.key">
            <view class="des">
              <text>LEVEL.1</text>
              <text>/</text>
              <text>Energy FIGHTER</text>
              <text>/</text>
              <text>LEVEL.1</text>
            </view>
            <view class="main">
              <view class="left">
                <view class="title">Lv.1 能量斗士</view>
                <view class="title1">Lv..1 能量猛将(区代)</view>
              </view>
              <view class="right">
                <image
                  :src="`https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/${dataItem.key}/${dataItem.key}.png`"
                  mode="widthFix"
                  class="img"
                ></image>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
      <view class="current_lv">当前等级：Lv.1 能量斗士(区代)</view>
    </view>
    <view class="lv_info">
      <view class="des">Lv.2 能量猛将可享6项特权</view>
      <view class="content">
        <view class="price"> 专属价格 </view>
        <view class="price_des">升级可享 更高折扣</view>
        <view class="box">
          <view class="title">Lv.2 能量猛将专属价</view>
          <image
            :src="`https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/${dataList[current].key}/${dataList[current].key}_small.png`"
            mode="scaleToFill"
          />
        </view>
        <view class="btn">点击升级</view>
      </view>
    </view>
    <!-- :style="`width:${item.height}rpx;height:${item.width}rpx;`"  -->
    <view class="privileges">
      <view class="content">
        <view class="box" v-for="(item, index) in privileges" :key="index">
          <image
            :src="`https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/${dataList[current].key}/${item.imgKey}.png`"
            mode="scaleToFill"
          />
          <view class="right">
            <view class="title">{{ item.title }}</view>
            <view class="des" :class="'des_' + dataList[current].key">
              <text>{{ item.des }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      dataList: [
        {
          key: "fighter",
        },
        {
          key: "strong",
        },
        {
          key: "king",
        },
      ],
      privileges: [
        {
          title: "专属价格",
          des: "价格更优惠",
          imgKey: "price",
          width: 46,
          height: 52,
        },
        {
          title: "宣传物料",
          des: "招生更简单",
          imgKey: "trumpet",
          width: 54,
          height: 58,
        },
        {
          title: "总部指导",
          des: "思路更清晰",
          imgKey: "link",
          width: 56,
          height: 50,
        },
        {
          title: "招募代理",
          des: "收益更可观",
          imgKey: "user",
          width: 54,
          height: 52,
        },
        {
          title: "优先体验",
          des: "研学先体验",
          imgKey: "flag",
          width: 56,
          height: 50,
        },
        {
          title: "后台管理",
          des: "管理更高效",
          imgKey: "monitor",
          width: 48,
          height: 50,
        },
      ],
    };
  },
  methods: {
    _bindChange() {},
  },
};
</script>

<style lang="scss" scoped>
.swiper-box {
  height: 325rpx;
}

.swiper_item {
  width: 648rpx !important;
  height: 325rpx !important;
}

.swiper_item_fighter {
  width: 626rpx;
  height: 296rpx;
  background: linear-gradient(0deg, #ffffff 0%, #c1f26d 100%);
  box-shadow: -4rpx 0rpx 19rpx 1rpx rgba(52, 52, 52, 0.15);
  border-radius: 38rpx;
}

.swiper_item_fighter .main .right .img {
  width: 204rpx !important;
  height: 248rpx !important;
}

.swiper_item_strong {
  width: 626rpx;
  height: 296rpx;
  background: linear-gradient(0deg, #ffffff 0%, #924feb 100%);
  box-shadow: -4rpx 0rpx 19rpx 1rpx rgba(52, 52, 52, 0.15);
  border-radius: 38rpx;
}

.swiper_item_strong .main .right .img {
  width: 204rpx !important;
  height: 248rpx !important;
}

.swiper_item_king {
  width: 626rpx;
  height: 296rpx;
  background: linear-gradient(0deg, #ffffff 0%, #f4ae71 100%);
  box-shadow: -4rpx 0rpx 19rpx 1rpx rgba(52, 52, 52, 0.15);
  border-radius: 38rpx;
}

.swiper_item_king .main .right .img {
  width: 234rpx !important;
  height: 222rpx !important;
}

.swiper_item_content {
  .des {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 19rpx;
    color: #fff;
    text-align: center;
    padding: 16rpx 60rpx 0 60rpx;
  }

  .main {
    display: flex;
    justify-content: space-between;
    padding-left: 48rpx;

    .left {
      .title {
        font-family: YEFONTAoYeHei;
        font-weight: 400;
        font-size: 54rpx;
        color: #ffffff;
        margin-top: 82rpx;
        line-height: 54rpx;
      }

      .title1 {
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 22rpx;
        color: #656565;
        margin-top: 70rpx;
        line-height: 22rpx;
      }
    }

    .right {
      display: flex;
      justify-content: center;
      align-items: center;

      .img {
        width: 244rpx;
        height: 270rpx;
      }
    }
  }
}

.lv {
  background: #fafdec;
  padding-bottom: 28rpx;
}

.current_lv {
  text-align: center;
  font-family: HarmonyOS Sans SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #656565;
  margin-top: 21rpx;
}
.lv_info {
  margin-top: 46rpx;
  .des {
    font-family: HarmonyOS Sans SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
    line-height: 32rpx;
    padding-left: 26rpx;
  }

  .content {
    width: 702rpx;
    height: 406rpx;
    background: linear-gradient(0deg, #ffffff 0%, #924feb 100%);
    border-radius: 20rpx;
    margin: 30rpx auto 0 auto;
    padding: 36rpx 0 0 22rpx;
    box-shadow: -4rpx 0rpx 19rpx 1rpx rgba(52, 52, 52, 0.15);
    .price {
      font-family: HarmonyOS Sans SC;
      font-weight: bold;
      font-size: 24rpx;
      color: #ffffff;
    }
    .price_des {
      font-family: HarmonyOS Sans SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #fffefe;
      margin-top: 20rpx;
    }
    .box {
      display: flex;
      justify-content: space-between;
      width: 354rpx;
      height: 147rpx;
      background: #975aed;
      box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(52, 52, 52, 0.2);
      border-radius: 20rpx;
      margin-left: 156rpx;
      margin-top: 18rpx;
      .title {
        width: 218rpx;
        height: 38rpx;
        font-family: YEFONTAoYeHei;
        font-weight: 400;
        font-size: 39rpx;
        color: #ffffff;
        text-align: center;
        margin-top: 40rpx;
      }
      image {
        width: 136rpx;
        height: 152rpx;
      }
    }
    .btn {
      width: 636rpx;
      height: 62rpx;
      background: #b36ce7;
      border-radius: 31rpx;
      font-family: HarmonyOS Sans SC;
      font-weight: bold;
      font-size: 24rpx;
      color: #ffffff;
      text-align: center;
      line-height: 62rpx;
      margin: 30rpx auto 0 auto;
    }
  }
}
.privileges {
  margin-top: 58rpx;
  .content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 90rpx;
    column-gap: 40rpx;
    padding: 0 44rpx;
    .box {
      display: flex;
      align-items: center;
      justify-content: center;
      image {
        margin-right: 14rpx;
      }
      .right {
        .title {
          font-family: HarmonyOS Sans SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #000000;
          line-height: 28rpx;
        }
        .des {
          font-family: HarmonyOS Sans SC;
          font-weight: 500;
          font-size: 24rpx;
          text {
            transform: scale(0.8333);
            line-height: 24rpx;
          }
        }
        .des_fighter {
          color: #7fc800;
        }
        .des_strong {
          color: #975aed;
        }
        .des_king {
          color: #d49e6d;
        }
      }
    }
  }
}
</style>
